<template>
  <view class="my">
    <view class="my--headAndNickName">
      <img
        class="my--headPhoto"
        :src="
          (useLoginStore && useLoginStore.user.avatarUrl) ||
          'https://img0.baidu.com/it/u=3091651474,4013446915&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        "
        alt=""
      />
      <view>
        <view class="my--nickName">
          {{ useLoginStore.user.nickname }}
        </view>
        <u-button
          @click="goto('/pages/index/editInfo')"
          :customStyle="{ width: '300rpx', borderRadius: '10px' }"
          text="编辑个人资料"
        ></u-button>
        <!-- <view v-if="agentList.length" class="my--agentNum">
          {{ agentList.length }} 个智能体
        </view> -->
      </view>
    </view>
    <view class="tabs">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab"
        :class="{ active: activeTabIndex === index }"
        @tap="changeTab(index)"
      >
        {{ tab }}
      </view>
    </view>
    <view class="tab-content" style="flex: 1; overflow: hidden">
      <view class="empty" v-if="activeTabIndex === 0">暂无作品</view>
      <view v-if="activeTabIndex === 1" style="height: 100%">
        <scroll-view scroll-y="true" class="ai-list" v-if="blogList.length">
          <view
            @tap="onChat(item)"
            v-for="item in blogList"
            :key="item.id"
            class="ai-item"
          >
            <img :src="item.avatarUrl" alt="" class="ai-img" />
            <view class="ai-info">
              <view class="name">{{ item.nickname }}</view>
              <u-text
                class="description"
                :lines="2"
                :text="item.agentDescription"
              ></u-text>
            </view>
          </view>
        </scroll-view>
        <view class="empty" v-else>暂无</view>
      </view>
      <view v-if="activeTabIndex === 2" style="height: 100%">
        <scroll-view scroll-y="true" class="ai-list" v-if="agentList.length">
          <u-swipe-action>
            <u-swipe-action-item
              :options="swipeProps"
              @click="handleAgent(item, index)"
              v-for="(item, index) in agentList"
              :key="item.id"
              :index="item.id"
            >
              <view @tap="onChat(item)" class="ai-item">
                <img :src="item.avatarUrl" alt="" class="ai-img" />
                <view class="ai-info">
                  <view class="name">{{ item.nickname }}</view>
                  <u-text
                    class="description"
                    :lines="2"
                    :text="item.agentDescription"
                  ></u-text>
                </view>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </scroll-view>
        <view class="empty" v-else>暂无智能体</view>
      </view>
      <view class="empty" v-if="activeTabIndex === 3">暂无收藏</view>
    </view>
    <Tabbar :current="2" :tab-bar-list="tabBerLists" />
  </view>
</template>
<script setup>
import arr from "@/utils/tabbar";
import { getUserInfo } from "@/global/userApi";
import { getAgentList, deletePresetAgent } from "@/global/agentApi";
const tabBerLists = arr;
import useChat from "@/store/useChat.js";
import useAgent from "@/store/useAgent.js";
import useLogin from "@/store/useLogin.js";
import { nextTick } from "process";
const useChatStore = useChat();
const useAgentStore = useAgent();
const useLoginStore = useLogin();
const tabs = ref(["作品", "私密", "智能体", "收藏"]);
const agentList = ref([]);
const blogList = ref([]);
const activeTabIndex = ref(2);
const swipeProps = ref([
  {
    text: "删除",
    style: {
      backgroundColor: "red",
    },
  },
]);

onLoad(() => {
  uni.hideTabBar();
});
onShow(() => {
  changeTab(2);
  getUserInfo({
    userId: uni.getStorageSync("currentUserId"),
  }).then((res) => {
    if (res.code === 200) {
      uni.setStorageSync("userObj", res.data[0]);
      useLoginStore.user = res.data[0];
    }
  });
});

const onChat = (item) => {
  useChatStore.selectSession(item.groupId);
  useChatStore.checkNewUserChat(item);
  useAgentStore.agentId = item.agentId;
  nextTick(() => {
    uni.navigateTo({
      url: "/pages/index/chat?nickname=" + item.nickname,
    });
  });
};

//删除智能体
const handleAgent = (data, index) => {
  console.log(index);
  uni.showModal({
    title: "温馨提示",
    content: "删除后不可恢复，确定要删除吗",
    success: function (res) {
      if (res.confirm) {
        deletePresetAgent({
          agentId: data.agentId,
          userId: uni.getStorageSync("currentUserId"),
          groupId: data.groupId,
        }).then((res) => {
          if (res && res.code == 200) {
            uni.showToast({
              icon: "none",
              title: "已删除",
            });
            agentList.value.splice(index, 1);
          }
        });
        //todo 调api
      }
    },
  });
};

const changeTab = (index) => {
  activeTabIndex.value = index;
  if ([1, 2].indexOf(index) === -1) {
    return;
  }
  getAgentList({
    types: index === 2 ? ["default", "agentX_sop"] : ["BiographySop"],
    userId: uni.getStorageSync("currentUserId"),
  }).then((res) => {
    if (res.code === 200) {
      if (index === 1) {
        blogList.value = res.data;
      } else {
        agentList.value = res.data;
      }
    }
  });
};
const goto = (url) => {
  uni.navigateTo({
    url: url,
  });
};
</script>

<style lang="scss" scoped>
.my {
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;

  .tabs {
    width: 100%;
    display: flex;
    .tab {
      width: 25%;
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #bbb;
      border-bottom: 2rpx solid #ddd;
      font-size: 30rpx;
    }
    .active {
      color: #000;
      border-bottom: 2rpx solid #000;
      font-weight: 700;
    }
  }

  .ai-list {
    width: 100%;
    height: 100%;

    .ai-item {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      display: flex;

      .ai-img {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .ai-info {
        flex: 1;
        overflow: hidden;
        align-items: center;
        .name {
          font-size: 30rpx;
          font-weight: 700;
          color: #000;
          margin: 10rpx 0;
        }
        .description {
          color: #000;
          font-size: 24rpx;
        }
      }
      &:active {
        background-color: #f0f0f0;
      }
    }
  }

  .empty {
    width: 100%;
    text-align: center;
    font-size: 26rpx;
  }

  &--headAndNickName {
    position: relative;
    margin-bottom: 20rpx;
    .editIcon {
      position: absolute;
      top: 93rpx;
      left: 0;
      right: 0;
      margin: auto;
      width: 54rpx;
      height: 22rpx;
      background: linear-gradient(42deg, #ff5200 0%, #fe9f5d 100%);
      box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(255, 255, 255, 0.5);
      border-radius: 11rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16rpx;
      color: #ffffff;
      line-height: 22rpx;
      text-align: center;
      font-style: normal;
    }
  }

  &--bgImg {
    width: 100%;
    height: 420rpx;
    position: absolute;
    z-index: -2;
  }

  &--title {
    margin-top: 110rpx;
    height: 36rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #333333;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
  }

  &--headPhoto {
    margin: 38rpx auto 0;
    display: block;
    width: 240rpx;
    height: 240rpx;
    border-radius: 50%;
  }

  &--nickName {
    margin: 19rpx auto;
    height: 48rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #333333;
    line-height: 48rpx;
    text-align: center;
  }

  &--agentNum {
    margin: 12rpx auto;
    color: #666;
    // font-size: 14rpx;
    line-height: 24rpx;
    text-align: center;
  }

  &--item {
    margin: 12rpx auto 0;
    width: 690rpx;
    height: 86rpx;
    background: #ffffff;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__left {
      display: flex;
      align-items: center;

      .icon {
        margin-left: 26rpx;
        margin-right: 22rpx;
        width: 34rpx;
      }

      .text {
        height: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #333333;
        line-height: 24rpx;
        text-align: left;
        font-style: normal;
      }
    }

    &__right {
      padding-right: 22rpx;
      height: 100%;
      display: flex;
      align-items: center;

      .text {
        height: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #666666;
        line-height: 24rpx;
        text-align: right;
      }

      .icon {
        margin-left: 19rpx;
        width: 10rpx;
        height: 20rpx;
      }
    }
  }
}

.btn {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

button::after {
  border: none;
}
.edit-info {
  position: absolute;
  left: 50%;
  top: 210rpx;
  margin-left: 50rpx;
}
</style>
